<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/css/aos.css"/>
    <link rel="stylesheet" href="/css/blogList.css">
    <script src="/js/jquery-2.2.3.min.js"></script>
    <title>a</title>
    <style type="text/css">
        body {
            width: 100%;
            height: 100%;
        }

        .blog-summary{
            width: 200px;
        }

        .blog-like{
            width: 68px;
        }

        .blog-view{
            width: 80px;
        }
        .a {
            width: 100%;
            height: 100px;
            -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
            -moz-animation: moveDown 0.6s ease-in-out 0.2s backwards;
            -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
            -ms-animation: moveDown 0.6s ease-in-out 0.2s backwards;
            animation: moveDown 0.6s ease-in-out 0.2s backwards;
        }

        .videos {
            height: 100px;
            width: 160px;
        }

        @-webkit-keyframes moveDown {
            0% {
                -webkit-transform: translateY(-40px);
                opacity: 0;
            }
            100% {
                -webkit-transform: translateY(0px);
                opacity: 1;
            }
        }

        @-moz-keyframes moveDown {
            0% {
                -webkit-transform: translateY(-40px);
                opacity: 0;
            }
            100% {
                -webkit-transform: translateY(0px);
                opacity: 1;
            }
        }

        @-o-keyframes moveDown {
            0% {
                -webkit-transform: translateY(-40px);
                opacity: 0;
            }
            100% {
                -webkit-transform: translateY(0px);
                opacity: 1;
            }
        }

        @-ms-keyframes moveDown {
            0% {
                -webkit-transform: translateY(-40px);
                opacity: 0;
            }
            100% {
                -webkit-transform: translateY(0px);
                opacity: 1;
            }
        }

        @keyframes moveDown {
            0% {
                -webkit-transform: translateY(-40px);
                opacity: 0;
            }
            100% {
                -webkit-transform: translateY(0px);
                opacity: 1;
            }
        }

        /*自定义moveUp动画*/
        @-webkit-keyframes moveUp {
            0% {
                -webkit-transform: translateY(40px);
                opacity: 0;
            }
            100% {
                -webkit-transform: translateY(0px);
                opacity: 1;
            }
        }

        @-moz-keyframes moveUp {
            0% {
                -webkit-transform: translateY(40px);
                opacity: 0;
            }
            100% {
                -webkit-transform: translateY(0px);
                opacity: 1;
            }
        }

        @-o-keyframes moveUp {
            0% {
                -webkit-transform: translateY(40px);
                opacity: 0;
            }
            100% {
                -webkit-transform: translateY(0px);
                opacity: 1;
            }
        }

        @-ms-keyframes moveUp {
            0% {
                -webkit-transform: translateY(40px);
                opacity: 0;
            }
            100% {
                -webkit-transform: translateY(0px);
                opacity: 1;
            }
        }

        @keyframes moveUp {
            0% {
                -webkit-transform: translateY(40px);
                opacity: 0;
            }
            100% {
                -webkit-transform: translateY(0px);
                opacity: 1;
            }
        }

    </style>

</head>
<body>
<div class="a">
    <div class="blog-list" aos="flip-up">
        <ul>
                <li>
                    <div class="blog-time">
                        2017-11-14
                    </div>
                    <div class="blog-author">上清北改名</div>
                    <div class="blog-summary"><a href="#">递归下降的理解</a></div>
                    <div class="blog-like">
                        <img src="/images/like.png"/>
                        <p>2333</p>
                    </div>
                    <div class="blog-like blog-view">
                        <img src="/images/view.png">
                        <p>456</p>
                    </div>
                </li>

            <li>
                <div class="blog-time">
                    2017-09-14
                </div>
                <div class="blog-author">群里最菜</div>
                <div class="blog-summary"><a href="#">请问老师学习过程...</a></div>
                <div class="blog-like">
                    <img src="/images/like.png"/>
                    <p>40</p>
                </div>
                <div class="blog-like blog-view">
                    <img src="/images/view.png">
                    <p>30</p>
                </div>
            </li>

            <li>
                <div class="blog-time">
                    2017-08-20
                </div>
                <div class="blog-author">naive</div>
                <div class="blog-summary"><a href="#">测试集有巨大误差...</a></div>
                <div class="blog-like">
                    <img src="/images/like.png"/>
                    <p>340</p>
                </div>
                <div class="blog-like blog-view">
                    <img src="/images/view.png">
                    <p>255</p>
                </div>
            </li>

            <li>
                <div class="blog-time">
                    2017-08-17
                </div>
                <div class="blog-author">IssacII</div>
                <div class="blog-summary"><a href="#">这个情况是过拟合...</a></div>
                <div class="blog-like">
                    <img src="/images/like.png"/>
                    <p>20</p>
                </div>
                <div class="blog-like blog-view">
                    <img src="/images/view.png">
                    <p>3</p>
                </div>
            </li>

            <li>
                <div class="blog-time">
                    2017-07-12
                </div>
                <div class="blog-author">程续员苟力师</div>
                <div class="blog-summary"><a href="#">第六章的一些疑问...</a></div>
                <div class="blog-like">
                    <img src="/images/like.png"/>
                    <p>222</p>
                </div>
                <div class="blog-like blog-view">
                    <img src="/images/view.png">
                    <p>333</p>
                </div>
            </li>

            <li>
                <div class="blog-time">
                    2017-07-11
                </div>
                <div class="blog-author">香港记者</div>
                <div class="blog-summary"><a href="#">深度学习在NLP中...</a></div>
                <div class="blog-like">
                    <img src="/images/like.png"/>
                    <p>122</p>
                </div>
                <div class="blog-like blog-view">
                    <img src="/images/view.png">
                    <p>256</p>
                </div>
            </li>

            <li>
                <div class="blog-time">
                    2017-08-14
                </div>
                <div class="blog-author">可以</div>
                <div class="blog-summary"><a href="#">决策树解决欠拟合...</a></div>
                <div class="blog-like">
                    <img src="/images/like.png"/>
                    <p>121</p>
                </div>
                <div class="blog-like blog-view">
                    <img src="/images/view.png">
                    <p>211</p>
                </div>
            </li>

            <script>
                function addReadNum(blogId) {
                    jQuery.post("addReadNum", {
                        pid: blogId
                    }, function (res) {
                        if (res === "true") {
                        }
                    });
                }

            </script>
        </ul>


        <div class="page-split">
            <ul>
                <script>
                    //                    $(".blog-author").each(function () {
                    //                        var author = $(this).text();
                    //                        if (author.length > 4) { $(this).text(author.substring(0,4)+"...")};
                    //                    })

                    $(".blog-summary").each(function () {
                        var author = $(this).text();
                        if (author.length === 0) {
                            $(this).find("a").text("无题");
                        }
                    });

                    $(".blog-like").each(function () {
                        var author = $(this).find("p").text();
                        if (author > 999) {
                            $(this).find("p").text("999+");
                        }
                    });

                    //                    $(".blog-summary").each(function () {
                    //                        var author = $(this).text();
                    //                        if (author.length > 50) { $(this).text(author.substring(0,50)+"...")};
                    //                    })


                </script>

                <li class="page-last">
                    <a href="#">首页</a>
                </li>


                <li class="page-next">
                    <div class="page-next-container">
                        <a href="#">< 上一页</a>
                    </div>
                </li>


                <li class="page-number" style="border: none">
                    <a style="border: none">1</a>
                </li>

                <li class="page-number">
                    <a href="#">2</a>
                </li>


                <li class="page-next">
                    <div class="page-next-container">
                        <a href="#">下一页 ></a>
                    </div>
                </li>


                <li class="page-last">
                    <a href="#">尾页</a>
                </li>
            </ul>

        </div>
    </div>
</div>
<script src="/js/aos.js"></script>
<script>
AOS.init({
    easing: 'ease-out-back',
    duration: 1000
});
</script>
</body>
</html>